<template>
  <div class="pf-flow-approval-history pf-bgwhite">
    <el-collapse v-model="activeName">
      <el-collapse-item :name="item.taskName" v-for="item in datas" :key="item.taskId">
        <template v-slot:title>
          <div style="width: 100%">
            <span>{{ item.taskName }}</span>
            <el-button
              style="float: right; margin-right: 20px"
              link
              @click.stop="selectBizData(item)"
              >审批数据</el-button
            >
          </div>
        </template>
        <pf-form :config="formConfig" :model="item"></pf-form>
      </el-collapse-item>
    </el-collapse>
    <el-dialog v-model="bizDataDialogVis" title="审批数据">
      <pf-form :model="bizFormData" :config="bizFormConfig"></pf-form>
      <template #footer>
        <el-button @click="bizDataDialogVis = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, Ref, ref, toRefs } from 'vue';
import { emptyForm, FormModel, ResponseCodeEnum, useData, useHttpClient } from 'pf-component';
import { camundaApi } from '@/constants/api/camunda-api';
import { useNotice } from '@/components/element-plus/notice';
import { buildApprovalHistoryForm } from '@/views/page-config/flow/todos/form-data';

export default defineComponent({
  name: 'FlowApprovalHistory',
  props: ['processInstId'],
  setup(props) {
    const _processInstId: Ref<string> = toRefs(props).processInstId;
    const activeName: Ref<string> = ref('flowInfo');
    const datas: Ref<any[]> = ref([]);
    const handleTabClick = (data: any) => {};
    const bizDataDialogVis = ref(false);
    const bizFormConfig: Ref<FormModel> = ref(emptyForm);
    const bizFormData: Ref = ref({});
    const formConfig: Ref<FormModel> = ref(buildApprovalHistoryForm());
    const initDatas = () => {
      useHttpClient()
        .general<any>(camundaApi.processTaskApi.queryDoneTaskForProcess, {
          procInstId: _processInstId.value
        })
        .then(res => {
          if (ResponseCodeEnum.SUCCESS === res.code) {
            datas.value = res.data;
          } else {
            useNotice().message.error(res.message);
          }
        });
    };
    const selectBizData = (
      { taskFormKey, processDefinitionId, taskDefinitionKey, taskInsId } = {} as any
    ) => {
      bizDataDialogVis.value = true;
      useData()
        .loadForm([{ name: taskFormKey, config: bizFormConfig, info: bizFormData }])
        .then(res => {
          bizFormConfig.value.disabled = true;
          const params = {
            processDefinitionId,
            taskDefinitionId: taskDefinitionKey,
            taskInstId: taskInsId
          };
          console.log(params);
          useHttpClient()
            .general(camundaApi.processFormApi.taskFormData, params)
            .then(res => {
              console.log(res);
              if (res.code === ResponseCodeEnum.SUCCESS) {
                bizFormData.value = res.data;
              } else {
                useNotice().message.error(res.message);
              }
            })
            .catch(err => {
              useNotice().message.error(err);
            });
        });
    };
    onMounted(() => {
      initDatas();
    });
    return {
      datas,
      activeName,
      handleTabClick,
      formConfig,
      selectBizData,
      bizDataDialogVis,
      bizFormData,
      bizFormConfig
    };
  }
});
</script>
<style scoped lang="scss">
.#{$prefix} {
  &-flow-approval-history {
    //margin: 10px;
    //padding: 0;
    //overflow-y: auto;
    height: 100%;
  }
}
</style>
